<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'listSysResource.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="shortcut icon" href="${ctx }/ico/favicon.ico">
<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
 <link href="${ctx }/css/common.css" rel="stylesheet">

<!-- jqgrid-->
<link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820"
	rel="stylesheet">

<link href="${ctx }/css/animate.css" rel="stylesheet">
<link href="${ctx }/css/common.css" rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<!-- zTree -->
<link href="${ctx }/css/plugins/zTreeStyle/metro.css" rel="stylesheet">
<!-- Sweet Alert -->
<link href="${ctx }/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<style>
#xz #treeDemo {
	border: 1px solid black;
	margin-top: 0;
	width: 100%;
	height: 200px;
	position: absolute;
	background: #fff;
	overflow: auto;
	z-index: 100;
}
</style>
</head>

<body class="gray-bg">
	<div class="animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox ">
					<div class="ibox-content">
						<div class="row m-b-sm m-t-sm">
							<div class="col-md-11">
								<div class="input-group">
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="addSysResource">
										<i class="fa fa-plus"></i> 添加
									</button>
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="editSysResource">
										<i class="fa fa-pencil"></i> 编辑
									</button>
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="delSysResource">
										<i class="fa fa-trash"></i> 删除
									</button>
									<input type="text" placeholder="请输入菜单名称"
										class="input-sm form-control"
										style="float: right; height: 100%; width: 50%" id="search">
									<span class="input-group-btn"><button type="button"
											class="btn btn-sm btn-primary commonsearch" id="searchBtn">搜索</button> </span>
								</div>
							</div>
						</div>

						<div class="jqGrid_wrapper">
							<table id="table_list"></table>
							<div id="pager_list"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- 添加菜单模态窗口 -->
	<div class="modal inmodal" id="addSysResourceWin" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close closeWin" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h5 class="modal-title">添加菜单</h5>
				</div>

				<div class="ibox-content">
					<form class="form-horizontal m-t" id="addSysResourceForm">
						<div class="form-group">
							<label class="col-sm-3 control-label">菜单类型：</label>
							<div class="col-sm-8">
								<!-- <input id="type" name="type" type="text" class="form-control" required="" aria-required="true"> -->
								<select class="form-control m-b" name="type" id="type"
									required="" aria-required="true">
									<option value="">--请选择--</option>
									<option value="1">目录</option>
									<option value="2">菜单</option>
									<option value="3">功能</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">菜单名称：</label>
							<div class="col-sm-8">
								<input id="resourceName" name="name" class="form-control"
									required="" aria-required="true" type="text"
									placeholder="请输入菜单名称">
							</div>
						</div>
						<div class="form-group" id="menu0">
							<label class="col-sm-3 control-label">上级菜单：</label>
							<div class="col-sm-6">
								<input id="parentId" name="parentId" type="hidden"> <input
									id="parent_name" name="parent_name" class="form-control"
									required="" aria-required="true" type="text" readOnly="true">
								<span class="help-block m-b-none"
									style="color: red; display: none;">请选择上级菜单！</span>
								<div id="xz" style="position: relative; left: 0;">
									<input type="hidden" id="show_user" name="show_user">
									<ul id="treeDemo" class="ztree"></ul>
								</div>
							</div>
							<button type="button" class="btn btn-success btn-outline"
								id="SysUserOrg" onClick="getUserNode();">
								<i class="fa fa-plus"></i>请选择
							</button>

						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">权限标识：</label>
							<div class="col-sm-8">
								<input id="resKey" name="resKey" class="form-control"
									type="text" required="" aria-required="true"
									placeholder="请输入权限标识">
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label">菜单事件：</label>
							<div class="col-sm-8">
								<input id="resUrl" name="resUrl" class="form-control"
									type="text" placeholder="请输入菜单事件">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">菜单图标：</label>
							<div class="col-sm-5">
								<input id="img" name="img" class="form-control" type="text"
									required="" aria-required="true" placeholder="请选择菜单图标">
							</div>
							<input id="ico-btn" class="btn btn-warning" type="button"
								value="选择图标">
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">菜单描述：</label>
							<div class="col-sm-8">
								<input id="description" name="description" class="form-control"
									type="text" required="" aria-required="true"
									placeholder="请选择菜单描述">
							</div>
						</div>

						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">
								<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary"
									id="add_SysResource_submit">保存</button>
							</div>
						</div>
					</form>
				</div>

			</div>
		</div>
	</div>
	<!--end 添加菜单模态窗口 -->


	<!-- 修改菜单模态窗口 -->
	<div class="modal inmodal" id="editSysResourceWin" tabindex="-1"
		role="dialog" aria-hidden="true" style="padding-bottom: 30px">

		<iframe id="editSysResourceFrame" width="100%" height="100%"
			frameborder="0"></iframe>

	</div>
	<!--end 修改菜单模态窗口 -->

	<!-- 全局js -->
	<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>

	<!-- Peity -->
	<script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>

	<!-- jqGrid -->
	<script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

	<!-- jQuery Validation plugin javascript-->
	<script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>

	<!-- layer javascript -->
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>

	<!-- jQuery form-->
	<script src="${ctx }/js/jquery.form.js"></script>
	<!-- ztree plugin javascript -->
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.core.min.js"></script>
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.exhide.min.js"></script>
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.exedit.min.js"></script>
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.excheck.min.js"></script>

	<!-- 自定义js -->
	<script src="${ctx }/js/content.js?v=1.0.0"></script>
	<!-- Sweet alert -->
	<script src="${ctx }/js/plugins/sweetalert/sweetalert.min.js"></script>

	<script>
		$(document)
				.ready(
						function() {
							$.jgrid.defaults.styleUI = 'Bootstrap';
							// Examle data for jqGrid	        
							orgTreeload();
							//绑定表格数据
							$("#table_list")
									.jqGrid(
											{
												url : "${ctx }/security/resources/loadDataGrid",
												datatype : "json",
												height : "calc(100% - 265px)",
												autowidth : true,
												shrinkToFit : true,
												multiselect : true,
												multiboxonly : true,
												rowList : [ 10, 20, 30 ],
												root : "rows",
												colNames : [ '序号', '菜单名称',
														'上级菜单', '菜单类型', '权限标识',
														'URL地址', '描述', '图标' ],
												colModel : [
														{
															name : 'id',
															index : 'id',
															width : 60,
															sorttype : "int"
														},
														{
															name : 'name',
															index : 'name',
															width : 100
														},
														{
															name : 'parentName',
															index : 'parentName',
															width : 100
														},
														{
															name : 'type',
															index : 'type',
															width : 80,
															formatter : "select",
															editoptions : {
																value : "1:目录;2:菜单;"
															}
														},
														{
															name : 'resKey',
															index : 'resKey',
															width : 80
														},
														{
															name : 'resUrl',
															index : 'resUrl',
															width : 120
														},
														{
															name : 'description',
															index : 'description',
															width : 100

														},
														{
															name : 'img',
															index : 'img',
															width : 80,
															align : 'center',
															formatter : function(
																	cellvalue,
																	options,
																	rowObject) {
																return "<i class=\""+rowObject.img+"\"></i>";
															}
														} ],
												sortable : true,
												sortname : 'id',
												sortorder : 'asc',
												pager : "#pager_list",
												caption : "菜单列表",
												viewrecords : true
											});
						});

		// jqGrid 自动调整宽度
		$(window).bind('resize', function() {
			var width = $('.jqGrid_wrapper').width();
			var height = $('.jqGrid_wrapper').height();
			$('#table_list').setGridWidth(width);
			$('#table_list').setGridHeight(height);

		});

		//绑定查询事件
		$("#searchBtn").click(function() {

			var searchString = $("#search").val();
			$("#table_list").jqGrid('setGridParam', {
				url : "${ctx }/security/resources/loadDataGrid",
				postData : {
					'name' : searchString
				}, //发送数据 
				page : 1
			}).trigger("reloadGrid"); //重新载入 
		});

		/**
		 * 菜单key文本框失去焦点事件
		 * 验证父菜key是否重复
		 */
		$('#resKey')
				.blur(
						function() {
							var resKey = $('#resKey').val();

							$('#resKey').next().remove();
							if (resKey != null && resKey != '') {
								var resId = checkResKey(resKey);
								if (resId != 0) {
									var spa = '<span class="help-block m-b-none" style="color: red;">菜单key值重复，请重新输入！</span>';
									$('#resKey').after(spa);
								}
							}
						});

		/**
		 * 验证resKey是否存在
		 * 返回resKey对应菜单id
		 */
		function checkResKey(resKey) {
			var flag = 0;//不存在
			$.ajax({
				async : false,
				type : "post",
				url : "${ctx }/security/resources/checkResKey",
				data : "resKey=" + resKey,
				dataType : "json",
				success : function(data) {
					flag = data.errcode;
				},
				error : function() {
					//layer.alert('连接失败！',{icon: 2});
				}
			});
			return flag;
		}

		//绑定add表单提交事件,异步提交表单
		$('#addSysResourceForm')
				.submit(
						function() {
							var resId = checkResKey($('#resKey').val());
							if (resId != 0) {
								$('#resKey').next().remove();
								var spa = '<span class="help-block m-b-none" style="color: red;">菜单key值重复，请重新输入！</span>';
								$('#resKey').after(spa);
								return false;
							}
							var fromUrl = "${ctx }/security/resources/addResource";
							$
									.ajax({
										type : "post",
										url : fromUrl,
										data : $('#addSysResourceForm')
												.serialize(),
										success : function(data) {
											if (data.errcode == "0") {
												layer
														.alert(
																data.errmsg,
																{
																	icon : 1
																},
																function(index) {
																	//刷新表格数据
																	$(
																			"#table_list")
																			.trigger(
																					"reloadGrid");

																	//清空表单数据
																	$(
																			"#addSysResourceForm :input")
																			.not(
																					":button, :submit, :reset, :hidden")
																			.val(
																					"")
																			.removeAttr(
																					"checked")
																			.remove(
																					"selected");

																	//关闭add窗口
																	$(
																			'#addSysResourceWin')
																			.modal(
																					'hide');
																	//关闭提示框
																	layer
																			.close(index);
																});
											} else {
												layer.alert(data.errmsg, {
													icon : 2
												});
											}
										},
										error : function() {
											layer.alert('添加菜单失败！', {
												icon : 2
											});
										}
									});
							return false;
						});

		//绑定修改按钮事件
		$('#addSysResource').click(function() {
			$('#addSysResourceWin').modal('show');
		});

		//绑定修改按钮事件
		$('#editSysResource').click(function() {
			var selectedId = $("#table_list").jqGrid("getGridParam", "selrow");
			if (selectedId == null || selectedId == "") {
				layer.alert('请选择一项！', {
					icon : 0
				});
				return;
			}

			var fromUrl = "/security/resources/editResource";
			fromUrl = "${ctx }" + fromUrl;
			var frameSrc = fromUrl + "?resourcesId=" + selectedId;
			$("#editSysResourceFrame").attr("src", frameSrc);
			$('#editSysResourceWin').modal('show');
		});

		function editWinClose(flag) {
			if (flag == "0") {
				$("#table_list").trigger("reloadGrid");
			}

			//关闭edit窗口
			$('#editSysResourceWin').modal('hide');
		}

		//绑定删除事件
		$('#delSysResource').click(
				function() {
					var selectedIds = $("#table_list").jqGrid("getGridParam",
							"selarrrow");
					if (selectedIds == "") {
						layer.alert('请选择一项！', {
							icon : 0
						});
						return;
					}
					swal({
						title : "您确定要删除这条信息吗",
						text : "删除后将无法恢复，请谨慎操作！",
						type : "warning",
						showCancelButton : true,
						confirmButtonColor : "#DD6B55",
						confirmButtonText : "删除",
						closeOnConfirm : false
					}, function() {
						$.ajax({
							type : "post",
							dataType : "json",
							url : "${ctx }/security/resources/delResource",
							data : "ids=" + selectedIds,
							success : function(data) {
								if (data.errcode == "0") {
									//刷新表格数据
									$("#table_list").trigger("reloadGrid");
									swal("删除成功！", "您已经永久删除了这条信息。", "success");
								} else {
									swal("删除用户失败！", "您未删除这条信息。", "error");
								}
							},
							error : function() {
								swal("删除用户失败！", "您未删除这条信息。", "error");
							}
						});
					});
				});
		//选择图标
		$("#ico-btn").click(function() {
			layer.open({
				type : 2,
				title : '图标列表',
				content : '${ctx}/ico/fontIcon.html',
				area : [ '480px', '80%' ],
				success : function(layero, index) {
				}
			});
		});

		$("#type").change(function() {
			var v_type = $("#type").val();
			if (v_type == 1) {
				$("#menu0").hide();
				$("#parentId").val("0");
				$("#resUrl").removeAttr("required");
				$("#resUrl").removeAttr("aria-required");
				$("#parentId").removeAttr("required");
				$("#parentId").removeAttr("aria-required");
			} else {
				$("#menu0").show();
				$("#parentId").val("0");
				$("#resUrl").attr("required", "");
				$("#resUrl").attr("aria-required", "true");
				$("#parentId").attr("required", "");
				$("#parentId").attr("aria-required", "true");

			}
		});

		//-------选择菜单树加载 START--------//
		var treeUser;
		var v_node_id;
		var setting = {
			check : {
				enable : true,
				chkStyle : "radio",
				radioType : "all"
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "pId"
				}
			},
			async : {
				enable : true,
				url : "${ctx}/security/resources/getMenuJson",
				autoParam : [ "id", "name" ]
			},
			callback : {
				onCheck : zTreeOnCheck,
				onExpand : zTreeOnExpand
			}
		};
		//初始化加载选择机构树
		function orgTreeload() {
			$('#xz').hide();
			$.fn.zTree.init($("#treeDemo"), setting);
			treeUser = $.fn.zTree.getZTreeObj("treeDemo");
		}
		//节点展开触发
		function zTreeOnExpand(event, treeId, treeNode) {
			//alert(treeNode.id + ", " + treeNode.name+"--"+v_node_id);
			var v_child_node = treeNode.children;
			for (var j = 0; j < v_child_node.length; j++) {
				//alert("v_child_node-"+v_child_node[j].id+","+v_node_id);
				if (v_child_node[j].id == v_node_id) {
					treeUser.checkNode(v_child_node[j], true);
				}
			}
		};
		//选择节点触发
		function zTreeOnCheck(event, treeId, treeNode) {
			var nodes = treeUser.getCheckedNodes(true);
			if (nodes.length > 0) {
				$('#parentId').val(treeNode.id);
				$('#parent_name').val(treeNode.name);
			} else {
				$('#parentId').val("");
				$('#parent_name').val("");
			}

			$("#show_user").val("");
			$('#xz').hide();
		};
		//点击请选择，选择用户-层显示控制
		function sysuser() {
			var v_show_user = $("#show_user").val();
			if (v_show_user == "") {
				$("#show_user").val("0");
				$('#xz').show();
			} else {
				$('#xz').hide();
				$("#show_user").val("");
			}
		}
		//点击按钮触发-选择用户操作
		function getUserNode(x) {
			sysuser();
			v_node_id = x;
		}
		//------------end--------------------//
	</script>
</body>
</html>
